<template>
  <div class="courseDetails">
    <div class="classtopbox">
      <div class="left">
        <a>
          <img :src="courseData.img_url" />
        </a>
      </div>
      <div class="right">
        <div class="head_box">
          <h3>{{courseData.title}}</h3>
        </div>
        <div
          class="classtopitem clearfix inils"
          style="font-size: 16px;padding-bottom: 14px;border-bottom: 1px solid #eee;"
        >
          <div class="l1" style="display: none;">
            <i class="icon-inils01"></i>已报名
          </div>
          <div class="l2" style="display: none;">
            <span>0</span>
          </div>
          <div class="l1">
            <i class="icon-inils02"></i>学时
          </div>
          <div class="l2">
            <span>{{parseInt(courseData.xueshi_num)}}学时</span>
          </div>
          <div class="l1">
            <i class="icon-inils03"></i>浏览量
          </div>
          <div class="l2">
            <span>{{courseData.open_times}}</span>
          </div>
        </div>
        <div class="classtopitem clearfix">
          <div class="l1" style="width: 58px">主讲人：</div>
          <div class="fl">{{teacherInfo.name}}</div>
        </div>
        <div class="classtopitem clearfix">
          <div class="l1" style="width: 58px">有效期：</div>
          <div class="fl">
            自购买之日起
            <span>永久有效</span>
          </div>
        </div>
        <div class="price classtopitem clearfix">
          <div class="new_price">
            <em>价格：</em>¥
            <span>{{courseData.price}}元</span>
          </div>
        </div>
        <div class="classtopitem btn clearfix">
          <span class="buy" @click="nowbuy" v-show="btnbuycourse==0">立即购买</span>
          <span class="buy" @click="nowstudy" v-show="btnbuycourse==1">开始学习</span>
        </div>
      </div>
    </div>
    <div class="mainwrap">
      <div class="classmain">
        <div class="classmain-hd" id="view_main_nav">
          <ul>
            <li
              :class="{on:tabstate==index}"
              v-for="(item,index) in tabs"
              :key="index"
              @click="tab(index)"
            >{{item}}</li>
          </ul>
        </div>
        <div class="classmain-bd" style="overflow: hidden">
          <!-- 课程目录 -->
          <div id="video_meun1" v-show="tabstate==0">
            <div class="classmain_con">
              <dl class="class_directory" id="video_meun">
                <div v-for="(item,index) in courseInfo" :key="index">
                  <dt>{{item.title}}</dt>
                  <dd v-for="smalljie in item.jie" :key="smalljie.id">
                    <span>{{smalljie.title}}</span>
                    <div class="startstudy" @click="watchVideo(smalljie.id)">开始学习</div>
                    <i class="icon-01 free"></i>
                    <span
                      class="free"
                      style="float: right;width: 65px;color:#888"
                    >{{smalljie.video_shichang}}</span>
                  </dd>
                </div>
              </dl>
            </div>
          </div>
          <!-- 课程简介 -->
          <div class="classmain_con" v-show="tabstate==1" v-html="courseData.jianjie"></div>
        </div>
      </div>
      <div class="classside">
        <div class="classsideitem">
          <h3 class="classsidetit">讲师信息</h3>
          <div class="classsidecon">
            <dl class="class_js_dl">
              <dt>
                <img :src="teacherInfo.head_url" />
              </dt>
              <dd>
                <h3>{{teacherInfo.name}}</h3>
              </dd>
            </dl>
            <div class="class_js_txt">
              <!-- <span v-html="teacherInfo.contents"></span> -->
               <span v-html="teacherInfo.jianjie"></span>
              <span @click="teacherDetails" class="teacherDetails">【展开/折叠详情】</span>
            </div>
            <div class="class_js_txt" id="info" v-show="zhankai==1" v-html="teacherInfo.contents"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 未购买显示登陆框 -->
    <div class="login-mask" v-show="loginstate==1">
      <div class="login-box">
        <div class="login-title-box">
          <div class="login-title"></div>
          <div class="close-login" @click="closeLogin">X</div>
        </div>
        <div class="info-box">
          <input
            type="text"
            placeholder="请输入身份证号"
            maxlength="18"
            class="register_content_input"
            v-model="idcard"
          />
          <br />
          <input
            type="password"
            placeholder="请输入密码"
            class="register_content_input input-pw"
            v-model="UserPsd"
          />
          <br />
          <input
            type="text"
            placeholder="请输入验证码"
            maxlength="4"
            class="yanzhengma_input"
            @blur="checkLpicma"
            v-model="picLyanzhengma"
          />
          <input
            type="button"
            id="code"
            @click="createCode"
            class="verification1"
            v-model="checkCode"
          />
          <br />
          <a class="user_login" @click="Login">登录</a>
          <div class="btns-box">
            <router-link to="/findpw" class="find-pw">找回密码</router-link>
            <router-link to="/register" class="btn-regin">注册账号</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "courseDetails",
  data() {
    return {
      //教师详情展开
      token: localStorage.getItem("token"),
      zhankai: 0,
      tabs: ["课程目录", "课程简介"],
      tabstate: 0,
      courseData: "",
      teacherInfo: "",
      courseInfo: "",
      idcard: "",
      UserPsd: "",
      picLyanzhengma: "",
      checkCode: "",
      //点击购买未登录显示登陆弹窗
      loginstate: 0,
      buyCourseId: "",
      btnbuycourse: 0,
      //请求接口域名
      apiurl: "http://jixujiaoyu_api.songlongfei.club:1012"
    };
  },
  created() {
    this.createCode();
    if (localStorage.getItem("token")) {
      let that = this;
      let courseId = {
        kecheng_id: this.$route.params.courseId,
        uid: localStorage.getItem("uid"),
        token: localStorage.getItem("token")
      };
      this.$axios
        .post(
          this.apiurl + "/kecheng/check_kecheng_is_buy",
          qs.stringify(courseId)
        )
        .then(response => {
          if (response.data.status == "ok") {
            if (response.data.data.check_res == "0") {
              that.btnbuycourse = 0;
            } else if (response.data.data.check_res == "1") {
              that.btnbuycourse = 1;
            }
          } else if (response.data.status == "error") {
            console.log(response);
            this.$message.error({
              message: response.data.errormsg,
              duration: 1600
            });
            that.removeInfo();
          } else if (response.data.status == "relogin") {
            console.log(response);
            this.$message.error({ message: "重新登录", duration: 1600 });
            that.removeInfo();
          }
        });
    } else {
      this.removeInfo();
    }
  },
  watch: {
    token: {
      handler: function(val) {
        if (val) {
          console.log("token还在");
        } else {
          that.removeInfo();
        }
      }
    }
  },
  mounted() {
        let that = this;
    //url里传递过来的课程唯一id this.$route.params
    console.log(this.$route.params.courseId);
    that.buyCourseId = this.$route.params.courseId;
    let courseId = { kecheng_id: this.$route.params.courseId };
    this.$axios
      .post(this.apiurl + "/kecheng/get_kecheng_info", qs.stringify(courseId))
      .then(response => {
        if (response.data.status == "ok") {
          console.log(response.data.data);
          that.courseData = response.data.data;
          that.teacherInfo = response.data.data.jiangshi;
          that.courseInfo = response.data.data.zhang;
          console.log(response.data.data.zhang);
        }
      });
    
  },

  methods: {
    // 图片验证码
    createCode() {
      let code = "";
      var codeLength = 4; //验证码的长度
      var random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ); //随机数
      for (var i = 0; i < codeLength; i++) {
        //循环操作
        var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
        code += random[index]; //根据索引取得随机数加到code上
      }
      this.checkCode = code; //把code值赋给验证码
    },
    // 失焦验证图和密码
    checkLpicma() {
      this.picLyanzhengma.toUpperCase(); //取得输入的验证码并转化为大写
      if (this.picLyanzhengma == "") {
        alert("请输入验证码");
      } else if (this.picLyanzhengma.toUpperCase() != this.checkCode) {
        //若输入的验证码与产生的验证码不一致时
        alert("验证码不正确");
        this.createCode(); //刷新验证码
        this.picLyanzhengma = "";
      } else {
        //输入正确时
        return true;
      }
    },
    //立即购买
    nowbuy() {
      if (localStorage.getItem("login1") == "1") {
        let that = this;
        let courseId = {
          kecheng_id: this.$route.params.courseId,
          uid: localStorage.getItem("uid"),
          token: localStorage.getItem("token")
        };
        this.$axios
          .post(
            this.apiurl + "/kecheng/check_kecheng_is_buy",
            qs.stringify(courseId)
          )
          .then(response => {
            if (response.data.status == "ok") {
              if (response.data.data.check_res == "0") {
                that.$router.push({
                  name: "courseBuyDetails",
                  query: { id: this.buyCourseId }
                });
              } else if (response.data.data.check_res == "1") {
                this.$message.success({
                  message: "您已购买过该课程",
                  duration: 1600
                });
              }
            } else if (response.data.status == "error") {
              console.log(response);
              this.$message.error({
                message: response.data.errormsg,
                duration: 1600
              });
            } else if (response.data.status == "relogin") {
              console.log(response);
              this.$message.error({ message: "重新登录", duration: 1600 });
              that.removeInfo();
            }
          });
      } else {
        this.loginstate = 1;
      }
    },
    //立即学习
    nowstudy() {
      let Vid = "";
      for (var i = 0; i < this.courseInfo.length; i++) {
        for (let j = 0; j < this.courseInfo[i].jie.length; j++) {
          Vid = this.courseInfo[0].jie[0].id;
        }
      }
      this.$router.push({
        path: "/video",
        query: { courseId: this.buyCourseId, vid: Vid }
      });
    },
    removeInfo() {
      let that = this;
      localStorage.removeItem("uid");
      localStorage.removeItem("token");
      localStorage.removeItem("sex");
      localStorage.removeItem("name");
      localStorage.removeItem("mobile");
      localStorage.removeItem("id_card");
      setTimeout(() => {
        that.$router.push({ path: "/login" });
      }, 1600);
    },
    closeLogin() {
      this.loginstate = 0;
    },
    //用户登录
    Login() {
      let that = this;
      if (this.idcard == "") {
        alert("身份证号不能为空");
      } else if (
        !this.idcard.match(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/)
      ) {
        alert("请输入正确的身份证号");
      } else if (this.UserPsd == "") {
        alert("密码不能为空");
      } else if (this.checkLpicma() == true) {
        let userinfo = { id_card: this.idcard, password: this.UserPsd };
        this.$axios
          .post(this.apiurl + "/user/login", qs.stringify(userinfo))
          .then(response => {
            console.log(response.data);
            if (response.data.status == "ok") {
              localStorage.setItem("uid", response.data.data.uid);
              localStorage.setItem("token", response.data.data.token);
              localStorage.setItem("login1", "1");
              this.login1 = 1;
              localStorage.setItem("sex", response.data.data.sex);
              this.sex = response.data.data.sex;
              localStorage.setItem("name", response.data.data.name);
              this.name = response.data.data.name;
              that.loginstate = 0;
              localStorage.setItem("mobile", response.data.data.mobile);
              localStorage.setItem("id_card", response.data.data.id_card);
            } else if (response.data.status == "error") {
              this.$message.error({
                message: response.data.errormsg,
                duration: 1600
              });
            } else if (response.data.status == "relogin") {
              that.$message.error({ message: "请重新登录", duration: 1600 });
              localStorage.removeItem("login1");
              that.removeInfo();
            }
          });
      }
    },
    removeInfo() {
      localStorage.removeItem("uid");
      localStorage.removeItem("token");
      localStorage.removeItem("sex");
      localStorage.removeItem("name");
      localStorage.removeItem("mobile");
      localStorage.removeItem("id_card");
    },
    teacherDetails: function() {
      if (this.zhankai == 0) {
        this.zhankai = 1;
      } else {
        this.zhankai = 0;
      }
    },
    tab: function(index) {
      this.tabstate = index;
    },
    watchVideo: function(Vid) {
      let that = this;
      if (localStorage.getItem("uid") && localStorage.getItem("token")) {
        let courseId = {
          kecheng_id: this.$route.params.courseId,
          uid: localStorage.getItem("uid"),
          token: localStorage.getItem("token")
        };
        this.$axios
          .post(
            this.apiurl + "/kecheng/check_kecheng_is_buy",
            qs.stringify(courseId)
          )
          .then(response => {
            if (response.data.status == "ok") {
              if (response.data.data.check_res == "0") {
                this.$message.success({
                  message: "您还未购买该课程",
                  duration: 1600
                });
              } else if (response.data.data.check_res == "1") {
                that.$router.push({
                  path: "/video",
                  query: { courseId: that.buyCourseId, vid: Vid }
                });
              }
            } else if (response.data.status == "error") {
              console.log(response);
              this.$message.error({
                message: response.data.errormsg,
                duration: 1600
              });
            } else if (response.data.status == "relogin") {
              console.log(response);
              this.$message.error({ message: "重新登录", duration: 1600 });
              that.removeInfo();
            }
          })
          .catch(response => {
            console.log(response);
          });
      } else {
        this.$message.error({ message: "请您先登录", duration: 1600 });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.classtopbox {
  width: 1200px;
  margin: 15px auto;
  padding: 30px 0;
  background-color: #fff;
}
.classtopbox .left {
  position: relative;
  width: 580px;
  height: 320px;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  margin-left: 15px;
}
.classtopbox .left .cover-btn:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.classtopbox .left img {
  width: 100%;
  min-height: 320px;
}
.classtopbox .left a {
  transition: background-color 0.3s;
  position: absolute;
  top: 0;
  left: 0;
  width: 580px;
  height: 320px;
  // background: url(/static/images/coursedetails/icon.png) center center no-repeat;
}
.classtopbox .right {
  position: relative;
  margin-left: 30px;
  height: 320px;
  width: 560px;
  display: inline-block;
  vertical-align: top;
}
.classtopbox .right .inils i {
  display: inline-block;
  width: 16px;
  margin-right: 8px;
}
.classtopbox .right .inils .icon-inils01 {
  background-position: -365px -516px;
  height: 14px;
}
.classtopbox .right .inils .icon-inils02 {
  background-position: -415px -516px;
  height: 14px;
}
.classtopbox .right .inils .icon-inils03 {
  background-position: -465px -516px;
  height: 14px;
}
.classtopbox .sc .icon-shoucang1 {
  background-position: -538px -516px;
  height: 14px;
}
.classtopbox .sc .on:hover {
  color: #fb8484;
}
.classtopbox .sc .on:hover .icon-shoucang1 {
  background-position: -509px -516px;
}
.classtopbox h3 {
  margin-bottom: 10px;
  color: #333;
  font-size: 24px;
  line-height: 30px;
}
.classtopbox .classtopitem {
  margin-top: 15px;
  color: #888;
  font-size: 14px;
  overflow: hidden;
}
.classtopbox .classtopitem .fl {
  line-height: 14px;
}
.classtopbox .price {
  height: 50px;
  line-height: 50px;
}
.classtopbox .l1 {
  float: left;
  width: 84px;
  line-height: 17px;
}
.classtopbox .new_price {
  float: left;
  margin-right: 30px;
  height: 50px;
  color: #ee5347;
  font-weight: 500;
  font-size: 24px;
  margin-left: 10px;
}
.classtopbox .new_price em {
  font-size: 16px;
  font-style: normal;
}
.classtopbox .new_price span {
  font-size: 24px;
}
.classtopbox .old_price {
  float: left;
  color: #888;
  font-size: 14px;
  line-height: 55px;
}
.classtopbox .old_price span {
  text-decoration: line-through;
}
.classtopbox .l2 {
  float: left;
  width: 60px;
  color: #999;
  line-height: 20px;
}
.classtopbox .l2 span {
  margin-right: 5px;
  color: #656565;
}
.classtopbox .l2 em {
  display: inline-block;
  margin-right: 5px;
  padding: 0 3px;
  height: 18px;
  background-color: #fea12e;
  color: #fff;
  vertical-align: middle;
  line-height: 18px;
}
.classtopbox .score {
  float: left;
  margin-right: 10px;
}
.classtopbox .score i {
  margin-top: -3px;
  width: 14px;
  height: 14px;
}
.classtopbox .score .icon-star {
  background-position: -108px -220px;
}
.classtopbox .score .icon-star_no {
  background-position: -127px -220px;
}
.classtopbox .buytype {
  float: left;
  height: 30px;
}
.classtopbox .buytype a {
  float: left;
  display: block;
  margin-right: 12px;
  width: 76px;
  height: 28px;
  border: solid 1px #e6e6e6;
  color: #333;
  text-align: center;
  line-height: 28px;
}
.classtopbox .buytype a.on,
.classtopbox .buytype a:hover {
  width: 74px;
  height: 26px;
  border: solid 2px #e82f24;
  color: #e82f24;
  line-height: 26px;
}
.classtopbox .btn {
  padding: 0;
  height: 42px;
  margin-top: 15px;
}
.classtopbox .btn span {
  float: left;
  width: 145px;
  height: 40px;
  border-radius: 3px;
  text-align: center;
  font-size: 16px;
  line-height: 40px;
}
.classtopbox .btn span.buy {
  margin-right: 25px;
  border: solid 1px #e82f24;
  background-color: #e82f24;
  color: #fff;
}
.classtopbox .btn span.learn {
  border: solid 1px #e82f24;
  color: #e82f24;
  margin-right: 25px;
}
.classtopbox .info div {
  float: left;
  color: #666;
  font-size: 14px;
  line-height: 14px;
}
.classtopbox .icon-tips {
  margin: -3px 0 0 4px;
  width: 17px;
  height: 17px;
  background-position: -167px -367px;
}
.classtopbox .info i {
  margin: -3px 6px 0 0;
  width: 16px;
  height: 16px;
}
.classtopbox .info .icon-01 {
  background-position: -538px -514px;
}
.classtopbox .info .icon-04 {
  background-position: -509px -514px;
}
.classtopbox .info .icon-02 {
  background-position: -576px -516px;
}
.classtopbox .info .icon-03 {
  background-position: -117px -367px;
}
.classtopbox .buy {
  cursor: pointer;
}
.classtopbox .fx {
  margin-right: 60px;
}
.classtopbox .mb {
  position: relative;
}
.classtopbox .mb .fxp {
  display: none;
  width: 110px;
  height: 110px;
}
.classtopbox .mb:hover .fxp {
  display: block;
}
[class^="icon-"],
[class*="icon-"] {
  background-image: url(/static/images/coursedetails/icon.png);
  background-size: 650px 1000px;
  display: inline-block;
  vertical-align: middle;
}

.mainwrap {
  width: 1200px;
  margin: 0 auto;
  font-size: 0;
  display: flex;
}
.classmain {
  width: 880px;
}
.classside {
  width: 302px;
  margin-left: 14px;
}
.classside .classsideitem {
  background-color: #fff;
}
.classmain-hd {
  height: 58px;
  background-color: #fff;
  border-bottom: 0;
}
.classmain-hd ul {
  height: 56px;
  border-bottom: 1px solid #edf2f2;
  margin: 0 15px;
}
.classmain-hd li {
  float: left;
  margin-right: 40px;
  width: 120px;
  text-align: center;
  list-style-type: none;
  font-size: 16px;
}
.classmain-hd li {
  display: block;
  color: #333;
  font-size: 16px;
  line-height: 54px;
}
.classmain-hd li.on {
  border-bottom: solid 2px #e82f24;
  background-color: #fff;
  color: #e82f24;
}
.classmain-hd li:hover {
  background-color: #fff;
  color: #e82f24;
  cursor: pointer;
}
.classmain-bd {
  padding: 20px 30px;
  background-color: #fff;
  min-height: 50px;
}
.classmain-bd .classmain_con {
  margin-top: 20px;
  font-size: 14px;
}
.class_directory {
  margin-bottom: 15px;
  margin-top: 20px;
}
.class_directory dd,
.class_directory dt {
  height: 50px;
  font-size: 14px;
  line-height: 50px;
  margin-bottom: 15px;
}
.class_directory dt {
  margin-bottom: 15px;
  background-color: #fafafa;
  color: #656565;
  padding: 0 10px;
}
.class_directory dt span {
  float: left;
  width: 84px;
  text-align: center;
}
.class_directory dd {
  display: block;
  padding: 0 40px 0 27px;
  color: #666;
  position: relative;
  height: 100%;
}
.class_directory dd .startstudy {
  border: 0;
  background: #e82f24;
  width: 66px;
  position: absolute;
  right: 20px;
  line-height: 30px;
  border-radius: 5px;
  color: #fff;
  top: 10px;
  cursor: pointer;
  display: none;
  text-align: center;
}
.class_directory dd:hover .startstudy {
  display: block;
}
.class_directory dd:hover .free {
  display: none;
}
.class_directory dd:hover {
  background-color: #f6fafd;
  color: #e82f24;
}
.class_directory dd span {
  margin-right: 10px;
  line-height: 50px;
}
.class_directory dd i {
  float: right;
  margin-top: 16px;
  width: 30px;
  height: 22px;
}
.class_directory dd .icon-01 {
  background-position: -161px -513px;
}
.class_directory dd .icon-02 {
  background-position: -211px -513px;
}
.class_directory dd .icon-03 {
  background-position: -260px -513px;
}
.class_directory dd .icon-04 {
  background-position: -310px -513px;
}
.pt20 .classmain-bd #video_meun1 #video_meun .free {
  padding: 5px;
  width: 40px;
  border-radius: 4px;
  color: #fff;
  text-align: right;
  font-weight: 400;
  line-height: 44px;
}

.classsidetit {
  border-bottom: solid 1px #edf2f2;
  color: #333;
  font-size: 16px;
  line-height: 58px;
  height: 58px;
  text-indent: 20px;
}
.classsidecon {
  padding: 20px 16px;
}
.class_js_dl dt {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto;
}
.class_js_dl dt img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.class_js_dl dd h3 {
  margin: 10px 0;
  font-size: 16px;
  line-height: 20px;
  color: #333;
  display: block;
  text-align: center;
}
.class_js_dl dd .tag {
  margin: 10px 0;
  color: #666;
  font-size: 14px;
}
.class_js_dl dd .info {
  color: #666;
  font-size: 14px;
}
.class_js_dl dd .info span {
  color: #e82f24;
}
.class_js_dl dd .info i {
  margin: -2px 3px 0 0;
  width: 16px;
  height: 16px;
  background-position: -417px -367px;
}
.class_js_txt {
  margin: 10px 20px;
  color: #888;
  font-size: 14px;
}
.class_js_txt .teacherDetails {
  cursor: pointer;
  color: #000;
}
.class_jg_dl {
  overflow: hidden;
}
.class_jg_dl dt {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.class_jg_dl dt img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.class_jg_dl dd h3 {
  margin: 10px 0;
}
.class_jg_dl dd h3 a {
  color: #333;
  font-size: 16px;
  line-height: 20px;
  display: block;
  text-align: center;
}
.class_jg_dl dd p span {
  width: 70px;
  height: 26px;
}
.class_jg_dl dd p span.icon-star {
  margin-right: 15px;
  background-position: -200px -363px;
}
.class_jg_dl dd p span.icon-cert {
  background-position: -300px -362px;
}
.class_jg_ul {
  overflow: hidden;
  height: 60px;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eee;
  background: #fafeff;
  margin: 0 20px;
}
.class_jg_ul li {
  float: left;
  width: 33.333%;
  color: #666;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}
.class_jg_ul li:nth-child(2) {
  margin: 0 -1px;
  border: solid 1px #eee;
  border-width: 0 1px;
  margin-top: 10px;
}
.class_jg_ul li p {
  color: #666;
}
.class_jg_txt {
  margin: 0 20px 10px;
  color: #888;
  font-size: 14px;
}
.class_jg_btn {
  text-align: center;
  font-size: 14px;
}
.class_jg_btn a {
  display: inline-block;
  margin: 0 5px;
  width: 98px;
  height: 36px;
  border: solid 1px #c6c6c6;
  border-radius: 3px;
  background-color: #f7f7f7;
  color: #333;
  font-size: 14px;
  line-height: 36px;
}

.login-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
}
.login-box {
  width: 292px;
  border: 1px solid #d7d7d7;
  position: fixed;
  left: 50%;
  margin-left: -146px;
  top: 250px;
  background-color: #fff;
  padding-bottom: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  .login-title-box {
    width: 100%;
    height: 55px;
    .login-title {
      width: 126px;
      height: 34px;
      background-image: url(/static/images/index/login-title.png);
      margin-top: 25px;
      margin-left: 18px;
    }
    .close-login {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 20px;
      position: absolute;
      right: 10px;
      top: 10px;
      &:hover {
        color: #c60404;
        cursor: pointer;
      }
    }
  }
  .info-box {
    width: 252px;
    margin: 0 auto;
    .btns-box {
      width: 100%;
      height: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
    }
    .find-pw {
      font-size: 12px;
      color: #878787;
      &:hover {
        color: #c60404;
      }
    }
    .btn-regin {
      font-size: 12px;
      color: #878787;
      &:hover {
        color: #c60404;
      }
    }
  }
}
.register_content_input {
  width: 252px;
  height: 48px;
  box-sizing: border-box;
  padding-left: 15px;
  border: 1px solid #c1c1c1;
  border-radius: 5px;
  margin: 0 auto;
  font-size: 14px;
}
.input-pw {
  margin-top: 12px;
}
.yanzhengma_input {
  width: 130px;
  height: 40px;
  font-size: 14px;
  box-sizing: border-box;
  padding-left: 15px;
  border-radius: 5px;
  border: 1px solid #c1c1c1;
  display: inline-block;
  vertical-align: middle;
  margin-top: 12px;
}
.verification1 {
  width: 100px;
  height: 40px;
  font-size: 18px;
  letter-spacing: 3px;
  color: #c60404;
  background: #f2f2f5;
  border-radius: 5px;
  border: 1px solid #c1c1c1;
  margin-left: 17px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 12px;
  cursor: pointer;
}
.user_login {
  display: block;
  width: 252px;
  height: 48px;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  background-color: #c60404;
  border-radius: 5px;
  margin-top: 12px;
  cursor: pointer;
}
</style>
